<script setup>
import { ref } from "vue";

const props = defineProps({
  tabs: {
    type: Array,
    required: true,
  },
  activeTab: {
    type: String,
    required: true,
  },
});

const emit = defineEmits(["close-tab", "select-tab"]);

const handleClose = (path) => {
  emit("close-tab", path);
};

const handleSelect = (path) => {
  emit("select-tab", path);
};
</script>

<template>
  <div class="editor-tabs">
    <div
      v-for="tab in tabs"
      :key="tab.path"
      :class="['tab', { active: tab.path === activeTab }]"
      @click="handleSelect(tab.path)"
    >
      <span class="tab-name">{{ tab.name }}</span>
      <span class="tab-close" @click.stop="handleClose(tab.path)">×</span>
    </div>
  </div>
</template>

<style scoped>
.editor-tabs {
  height: 35px;
  background-color: #252526;
  display: flex;
  overflow-x: auto;
  border-bottom: 1px solid #3c3c3c;
}

.tab {
  padding: 0 10px;
  min-width: 100px;
  max-width: 200px;
  height: 35px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  background-color: #2d2d2d;
  border-right: 1px solid #3c3c3c;
  cursor: pointer;
  user-select: none;
}

.tab.active {
  background-color: #1e1e1e;
}

.tab-name {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.tab-close {
  margin-left: 8px;
  width: 20px;
  height: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 4px;
}

.tab-close:hover {
  background-color: #4c4c4c;
}
</style>
